<template>
  <!-- 横向轮播 -->
  <div class="slide-banner">
    <div class="banner-wrapper">
      <div ref="slide" class="slide-banner-wrapper">
        <!-- 轮播图图片区域 -->
        <div class="slide-banner-content">
          <div v-for="num in nums"
               :key="num"
               :class="'page' + num"
               class="slide-page">
            page {{ num }}
          </div>
        </div>
      </div>
      <!-- 轮播图下面的指示器 -->
      <div class="dots-wrapper">
        <span
          v-for="num in nums"
          :key="num"
          :class="{'active': currentPageIndex === (num - 1)}"
          class="dot"></span>
      </div>
    </div>
    <!-- 上一页和下一页的按钮 -->
    <div class="btn-wrap">
      <button class="next" @click="nextPage">nextPage</button>
      <button class="prev" @click="prePage">prePage</button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import BScroll from '@better-scroll/core'
import Slide from '@better-scroll/slide'

BScroll.use(Slide)

export default {
  name: 'Carousel',
  data () {
    return {
      nums: 4,
      currentPageIndex: 0
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.slide.destroy()
  },
  methods: {
    init () {
      // slide 为 BScroll 实例对象, this.slide --> 将这个对象挂载到vue实例对象上
      this.slide = new BScroll(this.$refs.slide, {
        scrollX: true,  // 表示HOR横向滚动, Tips: scrollX与scrollY是互斥关系
        scrollY: false, // 表示VER纵向滚动
        slide: true,
        momentum: false,
        bounce: false,
        probeType: 3
      })

      /**
       * scrollEnd事件
       * 触发时机: 滚动结束, 或则让一个正在滚动的 content 强制停止
       */
      this.slide.on('scrollEnd', this._onScrollEnd)

      /**
       * slideWillChange事件
       * 触发时机: slide 的 currentPage 值将要改变时
       */
      this.slide.on('slideWillChange', (page) => {
        this.currentPageIndex = page.pageX
      })

      /**
       * slidePageChanged事件
       * 触发时机: 当 slide 切换 page 之后触发
       * @since v2.1.0
       */
      this.slide.on('slidePageChanged', (page) => {
        // console.log('CurrentPage changed to => ', page)
      })
    },
    _onScrollEnd () {
      // console.log('CurrentPage => ', this.slide.getCurrentPage())
    },
    nextPage () {
      // 滚动到下一张
      this.slide.next()
    },
    prePage () {
      // 滚动到上一张
      this.slide.prev()
    }
  }
}
</script>

<style lang="less" scoped>

@height0: 200px; // Appears 2 times

.slide-banner {
  .banner-wrapper {
    position: relative;
  }

  .slide-banner-wrapper {
    min-height: 1px;
    overflow: hidden;
  }

  .slide-banner-content {
    font-size: 0;
    height: @height0;
    white-space: nowrap;

    .slide-page {
      display: inline-block;
      font-size: 26px;
      height: @height0;
      line-height: @height0;
      text-align: center;
      width: 100%;
    }

    .slide-page.page1 {
      background-color: #95b8d1;
    }

    .slide-page.page2 {
      background-color: #dda789;
    }

    .slide-page.page3 {
      background-color: #c3d899;
    }

    .slide-page.page4 {
      background-color: #f2d4a7;
    }
  }

  .dots-wrapper {
    bottom: 4px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);

    .dot {
      background: #eeeeee;
      border-radius: 50%;
      display: inline-block;
      height: 8px;
      margin: 0 4px;
      width: 8px;
    }

    .dot.active {
      border-radius: 5px;
      width: 20px;
    }
  }

  .btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    button {
      background-color: #666666;
      border-radius: 4px;
      color: #ffffff;
      margin: 0 10px;
      padding: 10px;
      height: 40px;
      cursor: pointer;
    }
  }
}

</style>
